<!--
 * @Author: ZJP 2712104231@qq.com
 * @Date: 2024-12-23 14:21:29
 * @LastEditors: ZJP 2712104231@qq.com
 * @LastEditTime: 2024-12-24 15:20:48
 * @FilePath: \zhlx-autoform-ui\src\components\form-designer\setting-panel\property-editor\personnelDepartmentLinkage-editor.vue
 * @Description: 人员和部门控件联动
 * 
 * Copyright (c) 2024 by zhlx - 2712104231@qq.com, All Rights Reserved. 
-->
<template>
  <el-form-item>
    <template #label>
      <span>关联部门组件
        <el-tooltip effect="light" content="选人员时自动查询相应部门并填入已选的部门组件中">
          <svg-icon icon-class="el-info" /></el-tooltip>
      </span>
    </template>
    <el-switch v-model="optionModel.personnelDepartmentLinkage" @change="handleLimitChange"></el-switch>
  </el-form-item>
  <el-form-item label="已选部门组件" v-if="optionModel.personnelDepartmentLinkage === true">
    <el-select 
      v-model="optionModel.relatedDepartmentWidgets" 
      placeholder="请选择" 
      clearable
    >
      <el-option v-for="item in formDomainSelectDepartmentList" :key="item.name" :value="item.id">{{ item.label + `[${item.name}]` }}</el-option>
    </el-select>
  </el-form-item>
</template>

<script>
  import SvgIcon from '@/components/svg-icon/index.vue'
  import i18n from "@/utils/i18n"
  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
  import dayjs from "dayjs";

  export default {
    name: "personnelDepartmentLinkage-editor",
    mixins: [i18n, propertyMixin],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    components: {
      SvgIcon,
    },
    data() {
      return {
      }
    },
    computed: {
      // 计算数据域中所有部门组件列表
      formDomainSelectDepartmentList() {
        const list = []
        this.designer.formDomainData.forEach((item) => {
          if (item.type == "select-department") {
            list.push({
              id: item.id,
              name: item.options.keyName || item.options.name,
              label: item.options.label,
            })
          }
        })
        return list
      },
    },
    methods: {
      /**
       * 是否开启关联部门组件
       * @param val 
       */
      handleLimitChange(val) {
        if (!val) {
          this.optionModel.relatedDepartmentWidgets = ''
        }
      },
    },
  }
</script>

<style scoped>
:deep(.el-radio-button__inner) {
  padding: 5px 7px !important;
}
</style>

